<template>
  <div>
    <el-date-picker
      v-model="selectedDate"
      type="date"
      placeholder="选择日期"
      @change="handleDateChange"
    ></el-date-picker>

    <el-table v-if="showTable" :data="tableData">
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column
        v-if="showToday"
        prop="todaySales"
        label="今日销量"
      ></el-table-column>
      <el-table-column
        v-if="showToday"
        prop="todayRevenue"
        label="今日销售额"
      ></el-table-column>
      <el-table-column
        v-if="showYesterday"
        prop="yesterdaySales"
        label="昨日销量"
      ></el-table-column>
      <el-table-column
        v-if="showYesterday"
        prop="yesterdayRevenue"
        label="昨日销售额"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: "", // 选择的日期
      tableData: [], // 表格数据
    };
  },
  computed: {
    showToday() {
      // 判断是否选择了今天的日期
      return this.selectedDate === this.getToday();
    },
    showYesterday() {
      // 判断是否选择了昨天的日期
      return this.selectedDate === this.getYesterday();
    },
    showTable() {
      // 判断是否选择了最近一周的日期
      return this.selectedDate !== "" && !this.showToday && !this.showYesterday;
    },
  },
  methods: {
    handleDateChange() {
      // 根据选择的日期更新表格数据
      // 这里根据实际情况获取对应日期的销量和销售额数据
      this.tableData = this.getTableData(this.selectedDate);
    },
    getTableData(date) {
      // 根据日期获取对应的销量和销售额数据
      // 例如，调用接口获取数据或者从本地存储中获取数据
      // 这里只是示例，实际情况需要根据你的业务逻辑来实现
      // 返回一个包含日期、销量和销售额的数组
      return [
        {
          date: date,
          todaySales: 100,
          todayRevenue: 1000,
          yesterdaySales: 90,
          yesterdayRevenue: 900,
        },
        // 其他日期的数据...
      ];
    },
    getToday() {
      // 获取今天的日期，格式为 YYYY-MM-DD
      const today = new Date();
      return this.formatDate(today);
    },
    getYesterday() {
      // 获取昨天的日期，格式为 YYYY-MM-DD
      const yesterday = new Date();
      yesterday.setDate(yesterday.getDate() - 1);
      return this.formatDate(yesterday);
    },
    formatDate(date) {
      // 格式化日期为 YYYY-MM-DD
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },
  },
};
</script>
